<template>
  <div class="msg-box">
    <!-- 左边 -->
    <div class="msg-l">
      <span class="msg-wd">我的消息</span>
      <div class="msg-list">
        <span @click="onAt" :class="{ changebackc: msgindex == 1 }">我的</span>
        <span @click="onPrivate" :class="{ changebackc: msgindex == 2 }"
          >私信
          <p v-show="prtivatesum">{{ prtivatesum }}</p>
        </span>
        <span @click="onComment" :class="{ changebackc: msgindex == 3 }"
          >评论</span
        >
        <span @click="onNotify" :class="{ changebackc: msgindex == 4 }"
          >通知</span
        >
      </div>

      <div class="msg-btn">
        <span>一键已读</span>
      </div>
    </div>

    <div class="msg-r">
      <!-- 艾特 我的 -->
      <At v-if="msgindex == 1" />
      <!-- 私信 -->
      <Private v-if="msgindex == 2" />
      <!-- 评论 -->
      <Comment v-if="msgindex == 3" />
      <!-- 通知 -->
      <Notify v-if="msgindex == 4" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import At from "./At";
import Comment from "./Comment";
import Notify from "./Notify";
import Private from "./Private";
export default {
  components: {
    At,
    Comment,
    Notify,
    Private,
  },
  data() {
    return {
      msgindex: 1,
      // prtivatesum: localStorage.getItem("prtivatesum"),
    };
  },
  methods: {
    onAt() {
      this.msgindex = 1;
    },
    onPrivate() {
      this.msgindex = 2;
    },
    onComment() {
      this.msgindex = 3;
    },
    onNotify() {
      this.msgindex = 4;
    },
  },
  computed: {
    ...mapState({
      //cookie
      prtivatesum: (state) => {
        return state.User.prtivatesum;
      },
    }),
  },

};
</script>

<style lang="less" scoped>
.changebackc {
  background-color: #ffffff;
}
.msg-box {
  width: 984px;
  // height: 500px;
  min-width: 500px;
  margin: 0 auto;
  display: flex;
  background-color: #f5f5f5;
  .msg-l {
    width: 184px;
    border: 1px solid #e3e3e3;
    height: 500px;
    .msg-wd {
      display: block;
      height: 60px;
      width: 100%;
      font-size: 20px;
      line-height: 60px;
      text-align: center;
      border-bottom: solid 1px #ddd;
    }
    .msg-list {
      display: flex;
      flex-direction: column;

      span {
        // background-color: #ffffff;
        border-bottom: solid 1px #e3e3e3;
        line-height: 54px;
        text-align: center;
        position: relative;
        p {
          position: absolute;
          right: 35px;
          top: 17px;
          display: block;
          font-size: 13px;
          width: 17px;
          line-height: 18px;
          height: 17px;
          background-color: red;
          border-radius: 14px;
          text-align: center;
          border: solid 3px #fff;
        }
      }
    }
    .msg-btn {
      height: 30px;
      width: 120px;

      text-align: center;
      margin: 20px auto;
      border: 1px solid #e3e3e3;
      border-radius: 30px;
      span {
        display: block;
        font-size: 14px;
        margin-top: 6px;
      }
    }
  }
  .msg-r {
    width: 100%;
  }
}
</style>
